<template>
  <div>
    <headerNav></headerNav>
    <div class="projectMap">
      <div class="policyNotice_Nav">
        <span @click="$router.push('/')">首页</span>>
        <span>项目图谱</span>
      </div>
      <div class="projectMap_top">
        <div class="projectMap_top_title">
          <img src="../../assets/PolicyDataCenter.png" alt />
          <h3>项目数据中心</h3>
        </div>
        <div class="projectMap_top_content">
          <div class="projectMap_top_content_left">
            <nationalMap v-on:province="accept"></nationalMap>
          </div>
          <div class="projectMap_top_content_right">
            <PolicyStatistics :cityType="cityType" :mapProvince="mapCity"></PolicyStatistics>
          </div>
          <div class="projectMap_top_content_img">
            <img src="../../assets/wave.png" alt />
          </div>
        </div>
      </div>
      <div class="projectMap_condition" v-show="provinceValue != ''">
        <div class="projectMap_condition_content">
          <div class="projectMap_condition_content_content">
            <div class="projectMap_condition_content_content_left">
              <span>地区：</span>
            </div>
            <div
              class="policyMap_condition_content_content_content"
              @click="moreEvent('provinceMore')"
              v-if="judgeWords(openData, 1)"
            >
              <span ref="provinceMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="provinceMore2" />
            </div>
            <ul class="projectMap_condition_content_content_right" ref="provinceMore">
              <li
                :class="openIndex == -1 ? 'active' : ''"
                v-if="cityValue != '' && openValue == 2"
                @click="openEvent(-1)"
              >{{ cityValue }}</li>
              <li
                :class="openIndex == -1 ? 'active' : ''"
                v-else
                @click="openEvent(-1)"
              >{{ provinceValue }}</li>
              <li
                v-for="(item, index) in openData"
                :key="index"
                @click="openEvent(index)"
                :class="openIndex == index ? 'active' : ''"
              >{{ item }}</li>
            </ul>
          </div>
          <div class="projectMap_condition_content_content">
            <div class="projectMap_condition_content_content_left">
              <span>通过年份：</span>
            </div>
            <ul class="projectMap_condition_content_content_right" style="margin-left: 104px">
              <el-date-picker
                v-model="startYear"
                type="year"
                size="mini"
                placeholder="开始年份"
                @change="keywordEvent(1)"
              ></el-date-picker>
              <p class="particularYear_ps">到</p>
              <el-date-picker
                v-model="endYear"
                type="year"
                size="mini"
                placeholder="结束年份"
                @change="keywordEvent(2)"
              ></el-date-picker>
            </ul>
          </div>
          <div class="projectMap_condition_content_content">
            <div class="projectMap_condition_content_content_left">
              <span>关键字：</span>
            </div>
            <div class="projectMap_condition_content_content_right" style="margin-left: 104px">
              <input type="text" placeholder="输入关键词" class="keyword_inputs" v-model="keywordValue" />
              <span class="keyword_spans" @click="keywordEvent">搜索</span>
            </div>
          </div>
        </div>
      </div>
      <div class="projectMap_bottom" v-show="provinceValue != ''">
        <h3>项目数据</h3>
        <div class="projectMap_bottom_content">
          <dataStatistics ref="nationalMapRefs"></dataStatistics>
        </div>
      </div>
    </div>
    <footerNav></footerNav>
  </div>
</template>

<script>
import headerNav from "../../components/headerNav.vue"; //头部导航
import footerNav from "../../components/footerNav.vue"; //底部导航
import nationalMap from "../../components/project/nationalMap.vue"; //全国地图
import PolicyStatistics from "../../components/project/PolicyStatistics.vue"; //右侧政策统计、最新动态
import dataStatistics from "../../components/project/dataStatistics.vue"; //底部数据表
import { commonRequest } from "../../api/api.js";
export default {
  name: "projectMap",
  components: {
    headerNav,
    footerNav,
    nationalMap,
    PolicyStatistics,
    dataStatistics
  },
  head() {
    return {
      title: "项目图谱-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "项目图谱" },
        {
          hid: "description",
          name: "description",
          content: "各个地区的政策图谱"
        }
      ],
      script: [
        {
          src: "/js/echarts.min.js",
          body: true
        },
        {
          src: "/js/china.js",
          body: true
        },
        { src: "/js/广东.js", body: true },
        { src: "/js/安徽.js", body: true },
        { src: "/js/澳门.js", body: true },
        { src: "/js/北京.js", body: true },
        { src: "/js/重庆.js", body: true },
        { src: "/js/福建.js", body: true },
        { src: "/js/甘肃.js", body: true },
        { src: "/js/广西.js", body: true },
        { src: "/js/贵州.js", body: true },
        { src: "/js/海南.js", body: true },
        { src: "/js/河北.js", body: true },
        { src: "/js/河南.js", body: true },
        { src: "/js/黑龙江.js", body: true },
        { src: "/js/湖北.js", body: true },
        { src: "/js/湖南.js", body: true },
        { src: "/js/吉林.js", body: true },
        { src: "/js/江苏.js", body: true },
        { src: "/js/江西.js", body: true },
        { src: "/js/辽宁.js", body: true },
        { src: "/js/内蒙古.js", body: true },
        { src: "/js/宁夏.js", body: true },
        { src: "/js/青海.js", body: true },
        { src: "/js/山东.js", body: true },
        { src: "/js/山西.js", body: true },
        { src: "/js/陕西.js", body: true },
        { src: "/js/上海.js", body: true },
        { src: "/js/四川.js", body: true },
        { src: "/js/台湾.js", body: true },
        { src: "/js/天津.js", body: true },
        { src: "/js/西藏.js", body: true },
        { src: "/js/香港.js", body: true },
        { src: "/js/新疆.js", body: true },
        { src: "/js/云南.js", body: true },
        { src: "/js/浙江.js", body: true }
      ]
    };
  },
  data() {
    return {
      startYear: "",
      endYear: "",
      keywordValue: "",

      allRegions: "", // 所有地区

      provinceValue: "", // 当前选中省级

      provinceIndex: "", // 省级下标

      cityValue: "", // 当前选中市级

      openData: "", // 展开区域

      openIndex: -1, // 展开区域选中

      openValue: "", // 当前展示的值

      mapCity: "", // 地图选中省份

      cityType: 1 //选中的城市类型
    };
  },
  mounted() {
    commonRequest("/api/pms/pmsDepartment/getAllDepartmentArea?type=0").then(
      res => {
        this.allRegions = res;
      }
    );
  },
  methods: {
    judgeWords(data, index) {
      if (index == 1) {
        if (data) {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i];
          }
          if (str.length * 14 + (12 + 28) * data.length + 82 > 1020) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 地区切换
    openEvent(index) {
      if (index == -1 && this.openValue == "") {
        this.cityValue = "";
      }
      if (index != -1 && this.openValue != 2) {
        this.cityValue = this.openData[index];
      }
      this.openIndex = index;
      this.keywordEvent();
    },
    // 接受选中
    accept(index, value) {
      if (index < 2) {
        this.mapCity = value;
      }
      var that = this;
      that.openIndex = -1;
      that.openData = [];
      if (index === 0) {
        this.cityType = 1;
        that.provinceValue = "";
        that.cityValue = "";
        that.provinceIndex = "";
        that.startYear = "";
        that.endYear = "";
        that.keywordValue = "";
        that.openValue = "";
      }
      if (index === 1) {
        this.cityType = 2;
        that.provinceValue = value;
        for (let i = 0; i < that.allRegions.length; i++) {
          if (value == that.allRegions[i].province) {
            that.provinceIndex = i;
            for (let q = 0; q < that.allRegions[i].city.length; q++) {
              that.openData.push(that.allRegions[i].city[q].name);
            }
          }
        }
      }
      if (index === 2) {
        that.cityValue = value;
        that.openValue = index;
        for (
          let i = 0;
          i < that.allRegions[that.provinceIndex] &&
          that.allRegions[that.provinceIndex].city.length;
          i++
        ) {
          if (value == that.allRegions[that.provinceIndex].city[i].name) {
            that.openData = that.allRegions[that.provinceIndex].city[i].area;
          }
        }
      }
      that.keywordEvent();
    },
    // 查看更多
    moreEvent(value) {
      if (this.$refs[value + "1"].innerHTML == "更多") {
        this.$refs[value + "1"].innerHTML = "收起";
        this.$refs[value].style.maxHeight = "inherit";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(180deg)";
      } else {
        this.$refs[value + "1"].innerHTML = "更多";
        this.$refs[value].style.maxHeight = "32px";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(0deg)";
      }
    },
    keywordEvent(index) {
      var that = this;
      if (index == 1) {
        var datasta = new Date(that.startYear);
        var dataend = new Date(that.endYear);
        if (that.endYear != "") {
          if (dataend.getFullYear() < datasta.getFullYear()) {
            that.$message.error("请选择正确的时间");
            that.startYear = "";
          }
        }
      }
      if (index == 2) {
        var datasta = new Date(that.startYear);
        var dataend = new Date(that.endYear);
        if (that.startYear != "") {
          if (dataend.getFullYear() < datasta.getFullYear()) {
            that.$message.error("请选择正确的时间");
            that.endYear = "";
          }
        }
      }
      var areaValue = "";
      if (this.openValue != "" && this.openIndex != -1) {
        areaValue = this.openData[this.openIndex];
      }
      this.$refs.nationalMapRefs.acceptedValue(
        this.provinceValue,
        this.cityValue,
        this.endYear,
        this.startYear,
        this.keywordValue,
        areaValue
      );
    }
  }
};
</script>

<style lang="less" scoped>
.projectMap {
  width: 1200px;
  margin: 0px auto;
  .projectMap_top {
    margin-top: 28px;
    .projectMap_top_title {
      overflow: hidden;
      img {
        float: left;
        width: 18px;
        margin-top: 7px;
      }
      h3 {
        float: left;
        line-height: 32px;
        font-size: 24px;
        font-weight: 700;
        color: #333333;
        margin-left: 22px;
      }
    }
    .projectMap_top_content {
      margin-top: 30px;
      position: relative;
      &::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .projectMap_top_content_left {
        float: left;
        width: 800px;
        height: 600px;
        position: relative;
        z-index: 1;
      }
      .projectMap_top_content_right {
        float: left;
        width: 400px;
        height: 600px;
        position: relative;
        z-index: 1;
      }
      .projectMap_top_content_img {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 20px);
        img {
          width: 100%;
        }
      }
    }
  }
  .projectMap_condition {
    margin: 50px 0 30px 0;
    min-height: 1px;
    .projectMap_condition_content {
      background-color: #fff;
      box-shadow: 1px 2px 4px #eee;
      .projectMap_condition_content_content {
        padding: 10px 0;
        overflow: hidden;
        border-bottom: 1px solid #f2faff;
        position: relative;
        .projectMap_condition_content_content_left {
          float: left;
          padding-left: 20px;
          span {
            font-size: 14px;
            color: #333333;
            display: inline-block;
            line-height: 26px;
            font-size: 14px;
            margin: 3px 0;
          }
        }
        .policyMap_condition_content_content_content {
          position: absolute;
          right: 20px;
          top: 15px;
          width: 40px;
          overflow: hidden;
          cursor: pointer;
          span {
            font-size: 14px;
            color: #44a2ff;
          }
          img {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
          }
        }
        .projectMap_condition_content_content_right {
          margin-left: 90px;
          margin-right: 90px;
          overflow: hidden;
          max-height: 32px;
          li {
            float: left;
            line-height: 22px;
            padding: 2px 6px;
            font-size: 14px;
            margin: 3px 14px;
            cursor: pointer;
          }
          .active {
            background: #44a2ff;
            color: #fff;
          }
          .particularYear_ps {
            display: inline-block;
            margin: 0 10px;
            line-height: 29px;
            color: #999;
          }
          .keyword_inputs {
            float: left;
            display: inline-block;
            width: 240px;
            height: 32px;
            background: rgb(255, 255, 255);
            border: 1px solid rgb(218, 234, 245);
            border-radius: 4px 0px 0px 4px;
            box-sizing: border-box;
            padding-left: 12px;
            &::-webkit-input-placeholder {
              color: #ccc;
            }
          }
          .keyword_spans {
            float: left;
            display: inline-block;
            box-sizing: border-box;
            width: 60px;
            height: 32px;
            line-height: 30px;
            background: rgb(68, 162, 255);
            border-radius: 0px 4px 4px 0px;
            text-align: center;
            margin-left: -1px;
            color: rgb(255, 255, 255);
            cursor: pointer;
          }
        }
      }
    }
  }
  .projectMap_bottom {
    border-top: 1px solid #daeaf5;
    overflow: hidden;
    h3 {
      margin: 30px 0 40px 0;
      font-size: 24px;
      color: #333333;
      font-weight: 700;
    }
    .projectMap_bottom_content {
      width: 100%;
      height: 500px;
    }
  }
}
</style>
